<div class="content__title">
    <h1>Button</h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Type">
            <button nz-button [nzType]="'primary'" [disabled]="disabled" class="mr-sm">
                <span>Primary</span>
            </button>
            <button nz-button [nzType]="'default'" [disabled]="disabled" class="mr-sm">
                <span>Default</span>
            </button>
            <button nz-button [nzType]="'dashed'" [disabled]="disabled" class="mr-sm">
                <span>Dashed</span>
            </button>
            <button nz-button [nzType]="'danger'" [disabled]="disabled" class="mr-sm">
                <span>Danger</span>
            </button>
            <button nz-button [nzType]="'dashed'" (click)="toggleDisabled()" class="mr-sm">
                <span>Toggle disabled</span>
            </button>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Icon">
            <button nz-button [nzType]="'primary'" [nzShape]="'circle'" [disabled]="disabled" class="mr-sm">
                <i class="anticon anticon-search"></i>
            </button>
            <button nz-button [nzType]="'primary'" [disabled]="disabled" class="mr-sm">
                <i class="anticon anticon-search"></i><span>Search</span>
            </button>
            <button nz-button [nzType]="'dashed'" [nzShape]="'circle'" [disabled]="disabled" class="mr-sm">
                <i class="anticon anticon-search"></i>
            </button>
            <button nz-button [nzType]="'default'" [disabled]="disabled" class="mr-sm">
                <i class="anticon anticon-search"></i><span>Search</span>
            </button>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Size">
            <nz-radio-group [(ngModel)]="size" class="mb-md">
                <label nz-radio-button [nzValue]="'large'"><span>Large</span></label>
                <label nz-radio-button [nzValue]="'default'"><span>Default</span></label>
                <label nz-radio-button [nzValue]="'small'"><span>Small</span></label>
            </nz-radio-group>
            <div class="mb-md">
                <button nz-button [nzType]="'primary'" [nzSize]="size" [nzShape]="'circle'" class="mr-sm">
                    <i class="anticon anticon-download"></i>
                </button>
                <button nz-button [nzType]="'primary'" [nzSize]="size" class="mr-sm">
                    <i class="anticon anticon-download"></i><span>Download</span>
                </button>
                <button nz-button [nzType]="'primary'" [nzSize]="size">
                    <span>Normal</span>
                </button>
            </div>
            <nz-button-group [nzSize]="size">
                <button nz-button [nzType]="'primary'" class="mr-sm">
                    <i class="anticon anticon-left"></i><span>Backward</span>
                </button>
                <button nz-button [nzType]="'primary'">
                    <span>Forward</span><i class="anticon anticon-right"></i>
                </button>
            </nz-button-group>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Loading">
            <div class="mb-md">
                <button nz-button [nzType]="'primary'" [nzLoading]="loading" class="mr-sm">
                    <span><i class="anticon anticon-poweroff"></i> Loading</span>
                </button>
                <button nz-button [nzType]="'primary'" [nzSize]="'small'" [nzLoading]="loading" class="mr-sm">
                    <span>Loading</span>
                </button>
                <button nz-button [nzType]="'dashed'" (click)="toggleLoading()">
                    <span>Toggle Loading</span>
                </button>
            </div>
            <div class="mb-md">
                <button nz-button [nzType]="'primary'" [nzLoading]="loading" class="mr-sm">
                    <span>Click me!</span>
                </button>
                <button nz-button [nzType]="'primary'" [nzLoading]="loading">
                    <i class="anticon anticon-poweroff"></i>
                    <span>Click me!</span>
                </button>
            </div>
            <button nz-button [nzLoading]="true" [nzShape]="'circle'" class="mr-sm"></button>
            <button nz-button [nzLoading]="true" [nzShape]="'circle'" [nzType]="'primary'"></button>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Multiple Buttons">
            <button nz-button [nzType]="'primary'" class="mr-sm">
                <span>primary</span>
            </button>
            <button nz-button [nzType]="'default'" class="mr-sm">
                <span>secondary</span>
            </button>
            <nz-dropdown class="mr-sm">
                <button nz-button nz-dropdown><span>more</span> <i class="anticon anticon-down"></i></button>
                <ul nz-menu>
                    <li nz-menu-item>
                        <a>1st item</a>
                    </li>
                    <li nz-menu-item>
                        <a>2nd item</a>
                    </li>
                    <li nz-menu-item>
                        <a>3rd item</a>
                    </li>
                </ul>
            </nz-dropdown>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Ghost Button">
            <div class="bg-grey p-lg">
                <button nz-button [nzType]="'primary'" [nzGhost]="true" class="mr-sm">
                    <span>Primary</span>
                </button>
                <button nz-button [nzType]="'default'" [nzGhost]="true" class="mr-sm">
                    <span>Default</span>
                </button>
                <button nz-button [nzType]="'dashed'" [nzGhost]="true" class="mr-sm">
                    <span>Dashed</span>
                </button>
                <button nz-button [nzType]="'danger'" [nzGhost]="true">
                    <span>Danger</span>
                </button>
            </div>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Button Group">
            <h4 class="pb-sm">Basic</h4>
            <nz-button-group>
                <button nz-button>Cancel</button>
                <button nz-button [nzType]="'primary'">OK</button>
            </nz-button-group>
            <nz-button-group>
                <button nz-button [nzType]="'default'" disabled>
                    <span>L</span>
                </button>
                <button nz-button [nzType]="'default'" disabled>
                    <span>M</span>
                </button>
                <button nz-button [nzType]="'default'" disabled>
                    <span>R</span>
                </button>
            </nz-button-group>
            <nz-button-group>
                <button nz-button [nzType]="'primary'" disabled>
                    <span>L</span>
                </button>
                <button nz-button [nzType]="'default'" disabled>
                    <span>M</span>
                </button>
                <button nz-button [nzType]="'default'">
                    <span>M</span>
                </button>
                <button nz-button [nzType]="'dashed'" disabled>
                    <span>R</span>
                </button>
            </nz-button-group>
            <h4 class="py-sm">With Icon</h4>
            <nz-button-group>
                <button nz-button [nzType]="'primary'">
                    <i class=" anticon anticon-left"></i>
                    <span>Go back</span>
                </button>
                <button nz-button [nzType]="'primary'">
                    <span>Go forward</span>
                    <i class=" anticon anticon-right"></i>
                </button>
            </nz-button-group>
            <nz-button-group>
                <button nz-button [nzType]="'primary'">
                    <i class=" anticon anticon-cloud"></i>
                </button>
                <button nz-button [nzType]="'primary'">
                    <i class=" anticon anticon-cloud-download"></i>
                </button>
            </nz-button-group>
            <h4 class="py-sm">Size</h4>
            <nz-button-group [nzSize]="'large'">
                <button nz-button>Large</button>
                <button nz-button>Large</button>
            </nz-button-group>
            <nz-button-group>
                <button nz-button>Default</button>
                <button nz-button>Default</button>
            </nz-button-group>
            <nz-button-group [nzSize]="'small'">
                <button nz-button>Small</button>
                <button nz-button>Small</button>
            </nz-button-group>
        </nz-card>
    </div>
</div>
